<template>
   <div class="comment">
     <div class="comment-item" v-for="(item,index) in orderList" :key="index">
       <div class="goods-info">
         <img :src="item.goods_info.thumb_url" class="goods-info-img" mode="aspectFill"/>
         <div class="goods-info-name">
           <div class="info-name">
             <!-- <span class="details-tip">海外购</span> -->
             {{item.goods_info.name}}
           </div>
           <div class="info-name" v-if="item.goods_spu_info">
             {{item.goods_spu_info.spu_name}}
           </div>
           <div class="info-number">
             <div class="info-number-money">￥{{item.s_price}}</div>
             <div class="info-number-number">X{{item.num}}</div>
           </div>
         </div>
       </div>
       <div class="comment-content">
         <textarea  rows="10" placeholder="请输入你的评价" v-model="commentList[index].content"></textarea>
         <div class="imgList_wrapper">
           <div class="imgList" v-for="(img,indexs) in commentList[index].imgUrl" :key="indexs">
             <img :src="img" mode="aspectFill" class="introduce_item_pic">
             <img class="del-btn" src="../../../static/images/del.png">
           </div>
           <div class="imgList" v-if="commentList[index].imgUrl.length<3">
             <img src="../../../static/images/me/addPic.png" mode="aspectFill" @click="uploadImg(index)">
           </div>
         </div>
       </div>

     </div>
     <div class="save_wrapper">
       <div class="save" @click="save">发布</div>
     </div>
   </div>
</template>

<script>
  export default{
    name:'comment',
    data() {
      return {
        order_num:'',
        orderList: [],
        commentList: [],
      }
    },
    methods: {
      async getOrderDetail(){//获取商品订单快照
        let res=await this.$request.getData('/order/getOrders',{order_num:this.order_num})
        if(res.data.level=='success'){
          let str = res.data.data.order_item;
          this.orderList = [];
          this.commentList = [];
          str.forEach(item =>{
            if (item.status == 0){
              this.orderList.push(item)
              let str = {
                order_num: this.order_num,
                goods_id:item.goods_id,
                content:'',
                img_ids:[],
                imgUrl: [],
                goods_spu:item.goods_spu_id
              }
              this.commentList.push(str);
            }
          })
        }
      },
      uploadImg(index){
        let _this=this;
        wx.chooseImage({
          count:1,
          success(res) {
            const tempFilePaths = res.tempFilePaths;
            for (let i = 0; i<tempFilePaths.length ; i++){
              _this.uplaodsImg(tempFilePaths[i],index);
            }
          }
        })
      },
      //图片上传
      async uplaodsImg(url,index){
        let _this=this;
        wx.uploadFile({
          url: 'https://bifang.rzkeji.com/api/file/upload-img', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'photo',
          header: {
          'content-type': 'application/json' // 默认值
          },
          success(res) {
            console.log(res)
            let data = JSON.parse(res.data);
            _this.commentList[index].imgUrl.push(data.data.img_url)
            _this.commentList[index].img_ids.push(data.data.id)
          }
        })
      },
       async save(){
        let res=await this.$request.postData('/goods/userComment',{comment_list:this.commentList,user_token:wx.getStorageSync('userToken'),})
        if(res.data.level=='success'){
          this.$currency.showToast(res.data.message,'success',1500);
          let _this = this;
          setTimeout(function () {
            _this.$currency.redirectTo(`/pages/orderDetail/main?num=${_this.order_num}`)
          },1500)
        }else {
          this.$currency.showToast(res.data.message,'success',1500);
        }
      }
    },
    onLoad(options){
      this.order_num=options.order_num;
      this.getOrderDetail()
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../common/css/mixin";
  .flexBetween{
    display:flex;
    justify-content:space-between;
  }
  .comment{
    background: #ffffff;
    width: 100vw;
    min-height: 100vh;
    @include flex(flex-start);
    flex-direction: column;
  }
  .comment-item{
    width: calc(100% - 60rpx);
    padding: 30rpx;
    .goods-info{
      width: calc(100% - 20rpx);
      border: 2rpx solid #eee;
      padding: 10rpx;
      display: flex;
      height: 200rpx;
      border-radius: 16rpx;
      .goods-info-img{
        width: 120rpx;
        height: 120rpx;
        margin: 40rpx 20rpx;
      }
      .goods-info-name{
        width: calc(100% - 200rpx);
        margin-left: 40rpx;
        overflow: hidden;
        @include flex(center,flex-start);
        flex-direction: column;
        .info-name{
          height: 48rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .info-number{
          width:100%;
          line-height:25px;
          @extend .flexBetween;
        }
      }
    }
  }
  .comment-content{
    border-bottom: 2rpx solid #eee;
    padding-top: 30rpx;
    textarea{
      width:100%;
    }
    .imgList_wrapper{
      @include flexWrap(flex-start);
      flex-direction: row;
      width: 100%;
      .imgList{
        margin:30rpx 15rpx;
        width: calc((100vw - 150rpx)/3);
        height: calc((100vw - 150rpx)/3);
        position: relative;
        border-radius: 16rpx;
        .del-btn{
          position: absolute;
          top: -15rpx;
          right: -15rpx;
          width: 30rpx;
          height: 30rpx;
          background: #ffffff;
          border-radius: 360rpx;
          overflow: hidden;
        }
      }
    }
  }
  .save_wrapper{
    width:100%;
    margin-top:auto;
    .save{
      margin:0 auto;
      width:200px;
      height: 40px;
      line-height: 40px;
      font-size: 25px;
      border-radius: 10px;
      background: orange;
      color:#fff;
      text-align: center;
    }
  }
</style>
